<template>
    <div class="top-bar">
        <el-header style="text-align: right; font-size: 16px; height: 32px;">
            <div class="left-icon" @click="handleClickFold">
                <i style="color: #ff7068" :class="!isOpenMenu ? 'el-icon-s-fold' : 'el-icon-s-unfold'"></i>
            </div>
            <div class="right-icon">
                <el-dropdown trigger='click'>
                    <div class="userInfo el-dropdown-link">
                        <div class="userInfo el-dropdown-link"  style="width: 20px; height: 20px;margin-right: 10px">
                            <el-avatar style="width: 20px; height: 20px;" :src=" userInfo.headImage ? userInfo.headImage : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"></el-avatar>
                        </div>
                        <span style="color:#474747">{{userInfo.personName}}</span>
                    </div>
                    <el-dropdown-menu slot="dropdown" >
                        <el-dropdown-item command="a" @click.native="handleLogout" >退出登录</el-dropdown-item>
                        <el-dropdown-item command="a" @click.native="dialogVisible= true" >修改密码</el-dropdown-item>
                        <el-dropdown-item command="a" @click.native="handleChangeUserRole" >切换角色</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown> 
            </div>
        </el-header>
        <div :class="!$route.meta.tabList ? 'istitle-box' : 'title-box'" v-if="$route.meta.title">
            <el-breadcrumb separator=">" style="line-height: 32px; margin-left: 20px">
                <el-breadcrumb-item class="first-item">{{$route.meta.parentName}}</el-breadcrumb-item>
                <el-breadcrumb-item class="last-item">{{$route.meta.name}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="attributeMaintenance" v-if="$route.meta.tabList && $route.meta.tabList.length> 0 "> 
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane v-for="item in $route.meta.tabList" :label="item.label" :name="item.id" :key="item.id"></el-tab-pane>  
            </el-tabs>
        </div>
        <!-- 用户修改密码 -->
        <el-dialog
        title="修改密码"
        :visible.sync="dialogVisible"
        width="40%"
        :close-on-click-modal="false"
        :before-close="handleClose"  v-model="form">
            <el-form label-width="100px">
                <el-form-item label="初始密码:">
                    <el-input size="small" type='password' v-model="form.oldPassword" placeholder="请输入原密码" clearable></el-input>
                </el-form-item> 
                <el-form-item class="password" label="重置密码:">
                    <el-input size="small" type='password' v-model="form.newPassword" placeholder="请输入新密码" clearable></el-input>
                </el-form-item> 
                
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="handleSubmit">提交保存</el-button>
            </span>
        </el-dialog>
        <choseUserGroupRole v-if="isShow" :isShow='isShow' :groupRoleList="userInfos.groupRoleList" :userAssignId="userAssignId" @cancelShow="cancelShow" @choseUserGroupRole="choseUserGroupRole"></choseUserGroupRole>
    </div>
</template>
<script>
    import choseUserGroupRole from './choseUserGroupRole'
    export default {
        computed: {
            isOpen() {
                return this.$store.state.isOpen
            },
            userAssignId() {
                if(this.$store.state.loginGroup) {
                    return this.$store.state.loginGroup
                }else{
                    return JSON.parse(sessionStorage.getItem('item'))
                }
            }
        },
        components: {choseUserGroupRole},

        data() {
            return {
                userInfo: JSON.parse(sessionStorage.getItem('userInfo')),
                userInfos: JSON.parse(sessionStorage.getItem('userInfos')),
                groupRoleList: JSON.parse(sessionStorage.getItem('userInfos')).groupRoleList,
                isOpenMenu: this.$store.state.isOpen || false,
                activeName: 'first',
                dialogVisible: false,
                form: { 
                    oldPassword: '',
                    newPassword: '',
                },
                isShow: false,
               
            }
        },

        methods: {
            handleClickFold() {
                this.isOpenMenu= !this.isOpenMenu
                this.$store.dispatch('openMenu', this.isOpenMenu)
            },
            handleClick() {
                if(this.$route.name == 'attributeMaintenance') {
                    this.$store.dispatch('isActiviteAttribute',this.activeName)
                }else if(this.$route.name == 'uniqueCodeList'){
                    this.$store.dispatch('isActiviteUniqueCode',this.activeName)
                }
            },
            handleLogout() {
                sessionStorage.clear()
                this.$router.push({name: 'login'})
            },
             /**弹框关闭 */
            handleClose(done) {
                this.$confirm('确认关闭？').then(_ => {
                    this.dialogVisible= false
                }).catch(_ => {});
            },
            handleSubmit() {
                try {
                    let {oldPassword, newPassword}= this.form;
                    if(oldPassword == '') {
                        this.$message.warning('请输入原密码')
                    }else if(newPassword == '') {
                        this.$message.warning('请输入新密码')
                    }else {
                        let params= {
                            newPassword: this.$md5(newPassword),
                            oldPassword: this.$md5(oldPassword),
                            userId: this.userInfo.userId
                        }
                        console.log(params, 'params')
                        this.$server.loginAuthorityControlApi.resetPassword(params).then(res => {
                            this.$confirm('密码修改成功，请使用新密码重新登录！', '提示', {
                                confirmButtonText: '确定',
                                type: 'success',
                                showCancelButton: false,
                                showClose: false,
                                closeOnClickModal: false,
                                closeOnPressEscape: false
                            }).then(() => {
                                sessionStorage.clear()
                                this.$router.push({
                                    name: 'login'
                                })
                            })
                            
                        })
                    }
                }catch(err) {this.$paramsError(err)}
                
            },
            handleChangeUserRole() {
                this.isShow= true
            },
            cancelShow(title) {
                this.isShow= title
            },
            choseUserGroupRole(data) {
                console.log(data, 'data')
                if(data) {
                    //this.userPower= data
                    this.userInfos.userPower= data
                    sessionStorage.setItem('userInfos', JSON.stringify(this.userInfos))
                    console.log(data, 'data')
                   // window.location.reload()
                    console.log(1111)
                    this.$router.push({
                        name: 'home'
                    })
                    console.log(22)
                   // window.location.reload()
                   this.$store.dispatch('isChange', true)
                   this.$store.dispatch('userPowers', data)
                }
            },
        },

        mounted() {
            console.log(this.$route, 'route')
        }
    }
</script>

<style lang="less" scoped>
    .el-header {
        background-color: #fff;
        color: #333;
        line-height: 32px;
        box-sizing: border-box;
        border-bottom: 0px solid #eee;
        display: flex;
        justify-content: space-between;
        i {
            font-size: 20px;
        }
        .left-icon {
            cursor: pointer;
        }
        .left-icon:hover {
            animation-name: scaleDraw; /*关键帧名称*/
            animation-timing-function: ease-in-out; /*动画的速度曲线*/
            animation-iteration-count: infinite;  /*动画播放的次数*/
            animation-duration: 2s; /*动画所花费的时间*/

        }
        .right-icon {
            display: flex;
            align-items: center;
            .userInfo {
                display: flex;
                align-items: center;
            }
            i, .el-avatar>img {
                margin-right: 20px;
                
            }
            .el-avatar {
                line-height: 20px;
            }
        }
    }
    .title-box, .istitle-box {
        .title {
            font-size: 14px;
            margin-left: 20px;
            font-weight: normal;
            color:#474747;
            box-sizing: border-box;  
        }
    }

    .attributeMaintenance {
        box-sizing: border-box;
        height: 32px;
        box-sizing: border-box;
        //padding-top:10px;
        padding-left: 20px;
        .el-tabs {
            line-height: 32px;
        }
        .isactivite {
            color: #e60012;
            border-bottom: 1px solid #e60012;
        }
        
        border-bottom: 1px solid #eee;
        
    }
   
    .el-dropdown-menu {
        min-width: 80px;
    }
    .el-breadcrumb {
        font-size: 12px;
    }
    .top-bar {
        margin-bottom: 2px;
        box-shadow: 0px 2px 0px 0px rgba(173, 14, 14, 0.1)
    }
    @keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
        0%{
            transform: scale(1);  /*开始为原始大小*/
        }
    
        50%{
            transform: scale(1.3);
        }
       
        100%{
            transform: scale(1);
        }
    }
  
</style>
